<!-- 从业者-在线学习-在线课程列表 -->
<template>
	<view class="course-container">

		<!-- 专业等级筛选 -->
		<view class="filter-section">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="课程分类" :options="options1" @change="change"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="专业等级" :options="options2" @change="changeLevel"></u-dropdown-item>
			</u-dropdown>
		</view>

		<!-- 课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(course, index) in filteredResumes" :key="index">
				<view class="course-left">
					<u-image :src="course.bc_logo_uri[0].url" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
				</view>

				<view class="course-right">
					<text class="course-name">{{ course.bc_name }}</text>
					<text class="course-level">专业等级：{{ course.bc_zylevel }}</text>
					<text class="course-teacher">讲师：{{ course.bct_namelist }}</text>
					<view class="course-footer">
						<text class="course-count">{{ course.lessonCount }}节</text>
						<text class="course-count">|</text>
						<text class="course-price">¥{{ course.bc_price }}元</text>
					</view>

					<view class="course-actions">
						<text class="course-category"></text>
						<u-button v-if="course.isbuy == '0'" type="default" size="medium" shape="circle" :custom-style="btuStyle"
							@click="buyCourse(course.bc_code,course.isbuy)">
							购买
						</u-button>
						<u-button v-else type="default" size="medium" shape="circle" :custom-style="btuStyle" @click="studyCourse(course.bc_code,course.isbuy)">
							学习
						</u-button>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				value1: 9,
				value2: 0,
				options1: [
					{
						label: '全部',
						value: 9,
					},
					{
						label: '已购',
						value: 1,
					},
					{
						label: '未购',
						value: 0,
					},
					
				],
				options2: [{
						label: '一级',
						value: 1,
					},
					{
						label: '二级',
						value: 2,
					},
					{
						label: '三级',
						value: 3,
					}
				],
				classfiy:[], ///过滤分类生成
				courseList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '前端开发高级课程',
						level: '一级',
						rating: 3.4,
						teacher: '张老师',
						lessonCount: 45,
						price: '80.00',
						category: '前端开发',
						purchased: false
					},
					{
						id: 2,
						cover: '/static/course2.jpg',
						name: 'UI设计实战课程',
						level: '一级',
						rating: 3.4,
						teacher: '李老师',
						lessonCount: 45,
						price: '80.00',
						category: 'UI设计',
						purchased: true
					}
				]
			}
		},
		computed: {
		  filteredResumes() {
				if(this.value2 == 0){
					return this.courseList.filter(item => String(item.bc_publishstate) === '1')
				}	
				
				// 专业等级过滤
				if(this.value2) {
					let returnLabel = this.options2.find(item => item.value == this.value2 ).label
					return this.courseList.filter(item => String(item.bc_zylevel) === returnLabel)
				}
				// 课程分类
				if(this.value1 !== 9) {
					let returnLabel = this.options1.find(item => item.value == this.value1 ).value
					return this.courseList.filter(item => parseInt(item.isbuy) === returnLabel)
				} else {
					return this.courseList
				}
		  }
		},
		onShow() {
			// 新课程列表接口
			this.getbcList()
			
			// 原后台管理接口查询课程列表
			// this.getCourseList()
		},
		methods: {
			// 查询基础在线学习课程列表
			getbcList() {
				this.$u.api.querybclist({
					"usercode": uni.getStorageSync('usercode')
				}).then(res =>{
					console.log('bclist:', res)
					this.courseList = res.data.base_info
					// 查询节数
					this.starcyDetails()
					// 字典生成专业等级
					this.findLevel()
				})
			},				

			// 课程表，章节、视频-查询在线课程节数
			starcyDetails() {
				for(let i=0; i<this.courseList.length; i++) {
					this.$u.api.querybckcb({
						"bccode": this.courseList[i].bc_code ///#课程的code
					}).then(res =>{						
						let countjieshu = res.data.base_info.filter(item => item.bckcb_res_type === 1).length
						this.$set(this.courseList[i], 'lessonCount', countjieshu);
					})
				}				
				console.log('课程表节数-1：', this.courseList)	
			},
			
			// 获取在线课程列表
			getCourseList() {
				this.$u.api.querycblist({					
				}).then(res => {
					console.log('courselist：', res)
					this.courseList = res.data.base_info
					// 字典生成专业等级
					this.findLevel()
				})
			},
			
			findLevel() {
				let dictBase= []
				// 获取字典目录
				this.getDictItem('0',(error,dictBase) => {
					if (error) {
						console.error('获取字典失败:', error);
						return;
					}
					for(let i=0; i<dictBase.length; i++) {
						if(dictBase[i].dict_name == '课程分类' || dictBase[i].dict_name == '专业等级') {
								this.classfiy.push({
									dictCode: dictBase[i].dict_code,
									dictName: dictBase[i].dict_name
								})							
						}
					}
					console.log('courselist-2：', this.classfiy)					
				})			

				// 获取课程现有的专业等级（获取所有字典内的分类等级后面再补充）
				this.options2 = []
				this.options2.push({
					label: '全部',
					value: 0,
				});
				for(let i=0; i<this.courseList.length; i++) {
						this.options2.push({ 
							label: this.courseList[i].bc_zylevel,
							value: i+1,
						});
				}
			 console.log('courselist-1：', this.options2)
			},
			
			// 获取dict的项目
			getDictItem(dictcode,callback) {
				this.$u.api.querydict({
					dictcode: dictcode
				}).then(res =>{
					console.log('dict:', res)
					let dictBase = res.data.base_info
					callback(null, dictBase)
				}).catch(err => {
					console.error('获取字典失败:', err);
					callback(err, null);
				})				
			},
			
      // 购买按钮 
			buyCourse(id,isbuy) {
				// uni.showToast({
				// 	title: '购买课程: ' + id,
				// 	icon: 'none'
				// });
				// 实际开发中调用购买接口
				uni.navigateTo({
					url: `/pages/Practitioner/onlinecourse/coursedetails?bccode=${id}&isbuy=${isbuy}`
				});
			},
			// 带参数跳转学习按钮
			studyCourse(id,isbuy) {
				uni.navigateTo({
					url: `/pages/Practitioner/onlinecourse/coursedetails?bccode=${id}&isbuy=${isbuy}`
				});
			},
			
			changeLevel(index) {
				// this.$u.toast(`点击了第${index}项`);
				this.value1 = 9
				this.value2 = index
				
				// 这里可以根据选择的等级筛选课等级
			
			},
			change(index) {
				// this.$u.toast(`点击了第${index}项`);
				this.value1 = index
				this.value2 = 0
			},
		}
	}
</script>

<style lang="scss" scoped>
	.course-container {
		padding: 20rpx;
		background-color: #f5f7fa;
	}

	.filter-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		// margin-bottom: 20rpx;
	}
	
	

	.course-list {
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;

		.rating-value {
			font-size: 24rpx;
			color: #ff9900;
			margin-left: 10rpx;
		}
	}

	.course-footer {
		display: flex;
		// justify-content: space-between;
		margin-top: 10rpx;

		.course-count {
			font-size: 24rpx;
			color: #999;
			margin-right: 10px;
		}

		.course-price {
			font-size: 28rpx;
			color: #f56c6c;
			font-weight: bold;
		}
	}

	.course-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;


		.course-category {
			font-size: 24rpx;
			color: #999;
			background-color: #f5f7fa;
			padding: 6rpx 12rpx;
			border-radius: 20rpx;
			margin-left: 100rpx;
		}

		/deep/ .u-size-medium {
			height: 30px;
			line-height: 30px;

		}
	}
</style>